import { useRef, useState } from "react";
import { Button } from "antd";

import Input from "./input";
import GridBox from "./grid-box";

import "./App.css";

const items = [
  {
    key: 1,
    render: "1",
  },
  {
    key: 2,
    render: "2",
  },
  {
    key: 3,
    render: "3",
  },
  {
    key: 4,
    render: "4",
  },
  {
    key: 5,
    render: () => {
      return <div style={{ color: "red" }}>aaaaa</div>;
    },
  },
  {
    key: 6,
    render: "6",
  },
  {
    key: 7,
    render: "7",
  },
  {
    key: 8,
    render: "8",
  },
  {
    key: 9,
    render: "9",
  },
];

const App = () => {
  const [current, setCurrent] = useState<number | null>(9);
  const [inputVal, setInputVal] = useState("initial input val");
  const inputRef = useRef<any>(null);

  return (
    <div
      style={{
        width: "100%",
        height: "90vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <GridBox
        size={400}
        items={items}
        itemActiveCls={"aaa"}
        // allowClear={false}
        // defaultValue={6}
        value={current}
        onChange={(value) => {
          console.log(value, "change");
          setCurrent(value as number | null);
        }}
      />
      <Button style={{ marginTop: 20 }} type="primary" onClick={() => setCurrent(5)}>
        change value to 5
      </Button>
      <Button style={{ marginTop: 20 }} type="primary" onClick={() => setCurrent(null)}>
        clear state
      </Button>
      <Input
        style={{ marginTop: 20 }}
        ref={inputRef}
        defaultValue={"default value"}
        value={inputVal}
        onChange={(v) => {
          console.log(v, "input change");
          setInputVal(v as string);
        }}
      />
      <Button style={{ marginTop: 20 }} type="primary" onClick={() => setInputVal("outer change")}>
        set input value to "outer change"
      </Button>
      <Button
        style={{ marginTop: 20 }}
        type="primary"
        onClick={() => {
          console.log(inputRef.current.input.value);
        }}
      >
        get input value
      </Button>
    </div>
  );
};

export default App;
